<template>
  <div class="login">
    <div class="login1">
      <div>
        <p>登陆页面</p>
        账号: <input v-model="num" type="text" /><span v-show="flag"
          >输入的账号应在4-10位之间</span
        ><br />
        密码: <input v-model="password" type="password" /><br />
        <input type="checkbox" ref="input" />一天内免登录<br />
        <button @click="logins">登录</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="goRegister">去注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../http";
export default {
  data() {
    return {
      num: "",
      password: "",
      flag: false,
    };
  },
  watch: {
    num(newValue, oldValue) {
      if (newValue.length < 4 || newValue.length > 10) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
  },
  methods: {
    logins() {
      http
        .get("/deng", {
          params: {
            num: this.num,
            password: this.password,
          },
        })
        .then((res) => {
          console.log(res);
          console.log(this.$refs.input.checked);
          if (res.data === "登录成功") {
            if (this.$refs.input.checked) {
              this.setCookie("name", this.num, "d1");
              this.$router.push({ name: "Home" });
            } else {
              this.$router.push({ name: "Home" });
            }
          } else {
            alert("登录失败");
          }
        });
    },
    goRegister() {
      this.$router.push({
        name: "Register",
      });
    },
    setCookie(name, value, time) {
      var strsec = this.getsec(time);
      var exp = new Date();
      exp.setTime(exp.getTime() + strsec * 1);
      document.cookie =
        name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    },
    getsec(str) {
      var str1 = str.substring(1, str.length) * 1;
      var str2 = str.substring(0, 1);
      if (str2 == "s") {
        return str1 * 1000;
      } else if (str2 == "h") {
        return str1 * 60 * 60 * 1000;
      } else if (str2 == "d") {
        return str1 * 24 * 60 * 60 * 1000;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
span {
  color: red;
}
.login {
  width: 100%;
  height: 100%;
  background: skyblue;
  position: relative;
  .login1 {
    width: 400px;
    height: 400px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
</style>